<script lang="ts" setup>
import { SampleInformationApi } from '@/api/qis/sampleinformation'
import { UserInfoApi } from '@/api/qis/userInfo'
import download from '@/utils/download'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
const queryParams = ref({
  pageNo:1,
  pageSize:10
})




const getList = async () => {
  try {
    loading.value = true
    const data = await UserInfoApi.getUserInfoPage(queryParams.value)
    
    list.value = data.list
    list.value.forEach(item=>{
      item.selected = false
    })

    total.value = data.total

  } finally {
    loading.value = false
  }
}
const list = ref<any>([])

const queryFormRef = ref()

// 用户角色下拉数据
const rulesOptions = ref([
  { label: '项目管理员', value: 'admin_qis' },
  { label: '承检机构人员', value: 'org_user' },
  { label: '油田用户', value: 'first_party' },
  { label: '委托方人员', value: 'third_party' },
])



/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    pageNo:1,
    pageSize:10
  }
  getList()
}
const router = useRouter()

const total = ref()

// 新增
const handleAdd = (id?:Number)=>{
  router.push({path:'/inspection-info-management/user-info/add',query:{id:id}})
}

const message = useMessage() // 消息弹窗

const exportLoading = ref(false) // 导出的加载中

/** 导出按钮操作 */
const handleExport = async () => {

  try {

    if(arrayList.value.length > 0){
  // 导出的二次确认
  await message.exportConfirm()
  loading.value = true
  const idsArr = arrayList.value.join(';')
    // 发起导出
    exportLoading.value = true
    const data = await UserInfoApi.exportUserInfo({ids:idsArr, pageNo:1,pageSize:10})
    download.excel(data, '质检平台-用户管理.xls')
    } else {
      await message.exportConfirm()
      loading.value = true
      exportLoading.value = true
    const data = await UserInfoApi.exportUserInfo(queryParams.value)
    download.excel(data, '质检平台-用户管理.xls')
    }

  
  } catch {
  } finally {
    exportLoading.value = false
    loading.value = false

  }
}

const loading = ref(false) // 列表的加载中

const arrayList = ref<Number[]>([]) // 选中的数据

// 删除多条数据
const handleDeleteAll = async ()=>{
  if(arrayList.value.length > 0 ){
  
  ElMessageBox.confirm(
    '是否删除选中的数据?',
    '提示信息',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const stringIds =  arrayList.value.join(';') + ';'
   console.log(stringIds,'stringIds')
   await UserInfoApi.deleteUserInfo(stringIds)

   message.success('删除成功')
   list.value.forEach(e=>{
    e.selected  = false
    
   })
   

   arrayList.value = []
   console.log(arrayList.value)

   getList()

    })
    .catch(() => {

    })
  }else {
      message.error('请选择要删除的数据')
    }

}


// // 判断某个 id 是否被选中
// const isSelected = (id: number) => {
//   return arrayList.value.includes(id);
// };

// // 勾选复选框
// const handleSelect = (row: any) => {
//   const id = row.id as number;
//   if (isSelected(id)) {
//     arrayList.value = arrayList.value.filter(item => item !== id);
//   } else {
//     arrayList.value.push(id);
//   }
// };

// // 勾选复选框
const handleSelect = (row :any) => {
  // console.log('删除指标要求', row)
  if(row.selected){
    arrayList.value.push(row.id as Number)
    console.log(arrayList.value,'arrayList.value')
  }else {
    arrayList.value = arrayList.value.filter(item => item !== row.id)
  }
}

const handleEdit = (id:Number)=>{
  router.push({path:'/inspection-info-management/user-info/add',query:{id:id}})
}


onMounted(()=>{
  getList()
})

</script>

<template>
  <div class="user-info-container">
    <ContentWrap>
      
 

      <el-row>
        <el-col :span="24">
            <fromTitle
        title="用户管理"
        :queryParams="queryParams"
        @search="getList"
        @reset="resetQuery"
      />
            <el-form ref="queryFormRef" inline :model="queryParams" label-width="120px">
            <el-form-item label="姓名">
              <el-input class="!w-240px" v-model="queryParams.name" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="登录名">
              <el-input class="!w-240px" v-model="queryParams.loginName" placeholder="请输入登录名"/>
            </el-form-item>

            <el-form-item label="用户角色">
              <el-select
                v-model="queryParams.roleCode"
                placeholder="请选择用户角色"
                clearable
                class="!w-240px"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) of rulesOptions"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div class="table-btn">
      <el-button type="warning" v-hasPermi="['qis:sys-user:create']"  @click="handleAdd()">新增</el-button>
    <el-button type="info"  @click="handleExport">导出</el-button>
    <el-button type="danger" v-hasPermi="['qis:sys-user:delete']" @click="handleDeleteAll">删除</el-button>
    </div>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column   width="55">
        <template #header>
          <span>选择</span>
        </template>
        <template #default="scope">
          <el-checkbox v-model="scope.row.selected" @change="handleSelect(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="单位" align="center" prop="companyName" />
      <el-table-column label="用户角色" align="center" prop="roleName" />

      <el-table-column label="姓名" align="center" prop="name" >
        <template #default="scope">
          <el-link type="primary" @click="handleEdit(scope.row.id)">
            {{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column label="登录名" align="center" prop="loginName" />
      <el-table-column label="手机" align="center" prop="phone" />
      <!-- <el-table-column label="手机" align="center" prop="mobile" /> -->
      <el-table-column label="邮箱" align="center" prop="email" />



    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  </div>
</template>

<style lang="scss" scoped>
.user-info-container {
}
</style>
